<!--
 * @Description: 
 * @Author: 亢超
 * @Date: 2024-11-18 18:06:09
 * @LastEditTime: 2024-11-25 22:40:52
-->
<template>
  <div>
    <el-dialog :title="currentHandler == 'add' ? '增加原卷' : '编辑原卷'" :visible.sync="dialogVisible" width="400px">
      <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
        <el-form-item label="材质" prop="cz">
          <el-select v-model="form.cz" placeholder="请选择材质" size="small" style="width: 100%;"
            :disabled="currentHandler == 'edit' && currentData.length == 1 ? false : currentHandler == 'add' && currentData.length > 0 ? true : currentHandler == 'edit' && currentData.length > 1 ? true : false">
            <el-option v-for=" item in material" :label="item.title" :value="item.title"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密度" prop="md">
          <el-input v-model="form.md" size="small" placeholder="请输入密度"
            :disabled="currentHandler == 'edit' && currentData.length == 1 ? false : currentHandler == 'add' && currentData.length > 0 ? true : currentHandler == 'edit' && currentData.length > 1 ? true : false"></el-input>
        </el-form-item>
        <el-form-item label="厚度" prop="hd">
          <el-input v-model="form.hd" size="small" placeholder="请输入厚度"
            :disabled="currentHandler == 'edit' && currentData.length == 1 ? false : currentHandler == 'add' && currentData.length > 0 ? true : currentHandler == 'edit' && currentData.length > 1 ? true : false">
            <template slot="append">MM</template></el-input>
        </el-form-item>
        <el-form-item label="宽度" prop="kd">
          <el-input v-model="form.kd" :disabled="!form.cz && !form.md && !form.hd" size="small" placeholder="请输入宽度">
            <template slot="append">MM</template></el-input>
        </el-form-item>
        <el-form-item label="限重" prop="xz">
          <el-input v-model="form.xz" :disabled="!form.cz && !form.md && !form.hd" placeholder="请输入限重"
            oninput="value=value.replace(/[^\d]/g,'')" size="small"> <template slot="append">KG</template></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { validateNumberAndFolat, validateNumber } from '@/utils/validate.js';
export default {
  props: {

    currentData: {
      type: Array,
      default: () => []
    },
    currentUpdate: {
      type: Object,
      default: () => { }
    },
    currentHandler: {
      type: String,
      default: 'add'
    }
  },
  data () {
    return {
      dialogVisible: false,
      form: {
        cz: '',
        md: '',
        hd: '',
        kd: '',
        xz: ''
      },
      formRules: {
        cz: [
          { required: true, message: '请选择材质', trigger: 'change' }
        ],
        md: [
          { required: true, message: '密度不能为空', trigger: 'blur' },
          { validator: validateNumberAndFolat, trigger: 'blur' }
        ],
        hd: [
          { required: true, message: '厚度不能为空', trigger: 'blur' },
          { validator: validateNumberAndFolat, trigger: 'blur' }
        ],
        kd: [
          { required: true, message: '宽度不能为空', trigger: 'blur' },
          { validator: validateNumberAndFolat, trigger: 'blur' }
        ],
        xz: [
          { required: true, message: '限重不能为空', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
      },

      material: [
        { id: 1, title: '钢卷', value: '7.85' },
        { id: 2, title: '铝卷', value: '2.7' },
        { id: 3, title: '铜卷', value: '8.96' },
        { id: 4, title: '其他', value: '' },
      ]
    };
  },
  methods: {
    open () {
      this.dialogVisible = true
    },
    close () {
      // if (this.currentData.length > 0) {
      //   this.form.kd = ""
      //   this.form.xz   = ""
      // }
      this.dialogVisible = false
    },
    submitData () {
      const formRef = this.$refs.form
      formRef.validate((valid) => {
        if (valid) {
          let currentValue = JSON.parse(JSON.stringify(this.form))
          if (this.form.kd < window._CONFIG.minWidth) return Message.warning('原卷的宽度小于分条机的宽度')
          if (this.form.kd > window._CONFIG.manWidth) return Message.warning('原卷的宽度大于分条机的宽度')
          if (this.currentData.length > 0) {
            let currentArr = []
            let otherArr = []
            if (this.form.id != undefined) {
              currentArr = this.currentData.filter(item => item.kd != this.form.kd && item.id != this.form.id)
            } else {
              currentArr = this.currentData.filter(item => item.kd == this.form.kd)
            }
            otherArr = currentArr.filter(item => item.kd == this.form.kd)
            if (otherArr.length > 0) return Message.warning('此长度宽度已添加，请勿重复添加')
          }
          this.$emit('addSuccess', currentValue)
          this.dialogVisible = false
          formRef.resetFields()
        }
      })
    },

    isValueGreaterThanAllProperties (arr, prop, value) {
      return arr.every(obj => obj[prop] < value);
    }
  },
  watch: {
    'form.cz': {
      handler (val) {
        if (val) {
          let current = this.material.find(item => item.title == val)
          this.form.md = current.value
        }
      }
    },
    currentData: {
      handler (val) {
        if (val.length > 0) {
          this.form.id = undefined
          this.form.cz = val[0].cz
          this.form.md = val[0].md
          this.form.hd = val[0].hd
        }
      },
    },
    currentUpdate: {
      handler (val) {
        if (Object.keys(val).length > 0) {
          this.form = val
        }
      },
      deep: true
    },

  }
}
</script>

<style scoped></style>
